<template>
  <div class="LineStatus">
    <div v-for="(item, index) in lineList" :key="'item.lineName'+index" class="circle-wrap" :class="item.type | statusFilter">
      <div class="circle">
        <h2>{{ item.lineName }}</h2>
        <span>稼动率:{{ (item.activation).toFixed(1) }}%</span>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
import { cutLineName } from '@/utils'
import { getLinesStatus } from '@/api/screen'
export default ({
  name: 'LineStatus',
  filters: {
    statusFilter(type) {
      const status = {
        1: 'green', 2: 'gray', 3: 'yellow', 4: 'red'
      }
      return status[type]
    }
  },
  // props: {
  //   currentPreview: {
  //     type: String,
  //     default: ''
  //   }
  // },
  data() {
    return {
      lineList: [],
      currentView: {},
      regionid: null,
      lineId: null,
      lineStatusTimer: null,
      lineStatusInterval: 1000 * 60
    }
  },
  // computed: {
  //   ...mapGetters([
  //     'regionid',
  //     'lineId'
  //   ])
  // },
  created() {
    // 获取vuex中当前制程、线别
    this.getCurrentView()
    if (this.$route.path.indexOf('/screen') !== -1) {
      this.dataRefresh()
    }
  },
  beforeDestroy() {
    if (this.lineStatusTimer) {
      clearTimeout(this.lineStatusTimer)
      this.lineStatusTimer = null
    }
  },
  methods: {
    getCurrentView() {
      this.currentView = {
        regionid: this.$Cookies.get('currentReginid'),
        lineId: this.$Cookies.get('currentLineId')
      }
      // console.log(this.currentView)
      this.getData()
    },
    getData() {
      getLinesStatus(this.currentView).then(response => {
        this.lineList = response.data.map(item => {
          item.lineName = cutLineName(item.lineName)
          return item
        })
      })
    },
    dataRefresh() {
      if (this.lineStatusTimer) {
        clearTimeout(this.lineStatusTimer)
        this.lineStatusTimer = null
      }
      this.lineStatusTimer = setTimeout(() => {
        this.getData()
        this.dataRefresh()
      }, this.lineStatusInterval)
    }
  }
})
</script>

<style lang="scss">
$bgiUrl: '../../../assets/public_images/';
$redRotate: redRotate 6s linear infinite;
@keyframes redRotate{
    0% {
        transform:rotateZ(0deg);
    }
    100% {
        transform:rotateZ(360deg);
    }
}

.LineStatus{
  display: flex;
  justify-content: space-around;
  align-items: center;

  .circle-wrap{
    width: 100px;
    height: 100px;
    position: relative;
    cursor: pointer;

    &::after{
      content: '';
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0;
      left: 0;
      background-image: url($bgiUrl + 'circle-blue.png');
      background-size: 100% 100%;
    }

    .circle{
      width: 100%;
      height: 100%;
      text-align: center;
      border-radius: 50%;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;

      &::before{
        content: '';
        width: 78%;
        height: 78%;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: inset 0 0 10px 4px #1a5d96;
        z-index: -1;
      }

      span{
        font-size: 12px;
      }
    }

      // 不同状态 不同颜色
      &.gray{
        &::after{
          background-image: url($bgiUrl + 'circle-gray.png');
        }
        .circle::before{
          box-shadow: inset 0 0 10px 4px #616161;
        }
      }

      &.red{
        &::after{
          background-image: url($bgiUrl + 'circle-red.png');
          animation: $redRotate
        }
        .circle::before{
          box-shadow: inset 0 0 10px 4px red;
        }
      }

      &.yellow{
        &::after{
          background-image: url($bgiUrl + 'circle-yellow.png');
        }
        .circle::before{
          box-shadow: inset 0 0 10px 4px yellow;
        }
      }

      &.green{
        &::after{
          background-image: url($bgiUrl + 'circle-green.png');
        }
        .circle::before{
          box-shadow: inset 0 0 10px 4px #59e001;
        }
      }
  }

  h2{
    font-size: 24px;
    margin: 5px;
  }
}

.sideRight {
  .circle-wrap {
    width: 80px;
    height: 80px;
  }
  .LineStatus .circle-wrap::after{
      width: 80px;
      height: 80px;
  }
}
</style>
